<template>
  <div id="coupon">
    <div class="top">
      <div class="title">
        <h3 @click="toback"> ＜ </h3>
        优惠券
      </div>
      <div class="ticket">
        <span>优惠券 （5）</span> |
        <span>门店优惠券</span>
      </div>
    </div>

    <div class="content">
      
      <li v-for="(item,index) in ticket" :key="index">
        <h3 ref="bgs"><span>￥{{item.count}}</span><i>满{{item.totle}}元可用</i></h3>
        <h4><b>鸭鸭空调</b>
        <span>2019-10-01 0:00 至 </span>
        <span> 2019-10-08 12:00 使用</span>
        <span>全场服务订单使用</span>
        <i @click="useAction(index)">立即使用</i></h4>
      </li>

      <div class="footer">
        <span>鸭鸭空调竭诚为您服务</span>
        <span>800-8888-5678</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ticket:[{count:100,totle:3000},{count:200,totle:5000},{count:450,totle:7000},{count:700,totle:9000},{count:1000,totle:10000}]
    };
  },
  methods: {
    async requestShopMsg() {
      const {
        data: { data },
      } = await axios.get("data/grade.json");
      // console.log(ms)
      this.goods = data;
    },
    toback(){
        this.$router.back();
    },
    useAction(index){
      this.$router.push({name:"Order",params:{tit:this.ticket[index]}})
    }
  },
  mounted() {
    this.requestShopMsg();
  },
};
</script>

<style lang="scss" scoped>
#coupon {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.top{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 85px;
    background: linear-gradient(90deg, rgba(255, 115, 80, 1) 0%, rgba(255, 115, 80, 1) 0%, rgba(254, 155, 122, 1) 100%, rgba(254, 155, 122, 1) 100%);
    .title{
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      position: relative;
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
      font-weight: 700;
      font-style: normal;
      color: #FFFFFF;
      h3{
        position: absolute;
        left: 20px;
      }
    }
    .ticket{
      display: flex;
      justify-content: space-around;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      font-weight: 400;
      color:#fff;
      span{
        display: flex;
        flex: 1;
        justify-content: center;
      }
    }
}
.content{
  background:#f1f2f3;
  position: absolute;
  width: 100%;
  top: 85px;
  bottom: 0;
  padding:30px 20px;
  box-sizing: border-box;
  li{
    height: 87px;
    background: #fff;
    border: 1Px solid #aaa;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: #ddd 0 0 3px 3px;
    display: flex;
    position: relative;
    h3{
      width: 87px;
      background:  rgba(254, 155, 122, 1) ;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span{
        line-height: 30px;
        font-size: 20px;
        color: #fff;
      }
      i{
        line-height: 20px;
        font-size: 12px;
        color: #fff;
      }
    }
    h4{
      display: flex;
      margin-left: 20px;
      flex-direction: column;
      justify-content: space-around;
      
      b{
        font-size: 14px;
        color: #333;
        line-height: 20px;
        font-weight: 700;
      }
      span{
        font-size: 12px;
        color: #999;
        line-height: 15px;
      }
      i{
        position: absolute;
        right: 10px;
        bottom: 15px;
        background: #ffebe8;
        color: #ff0000;
        padding: 5px 7px;
        box-sizing: border-box;
        border-radius: 10px;
      }
    }
  }
  li:nth-of-type(1){
    h3{
      background:#FA7268;
    }
  }
  li:nth-of-type(2){
    h3{
      background: #8078FF;
    }
  }
  li:nth-of-type(3){
    h3{
      background: #6CC0FE;
    }
  }
  li:nth-of-type(4){
    h3{
      background:#FA7268;
    }
  }
  li:nth-of-type(5){
    h3{
      background: #8078FF;
    }
  }
}
.footer{
  position: absolute;
  bottom: 5px;
  left: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #aeaeae;
}
</style>